<template>
	<!-- 1. -->
	<el-container style="height: 1000px; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu :default-active="$route.path" :default-openeds="['1', '3']" router>
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-message"></i>商城管理系统</template>
					<el-menu-item-group>
						<template slot="title"></template>
						<el-menu-item index="/index">首页</el-menu-item>
						<el-menu-item index="/user">用户信息管理</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group title="主营业务">
					  <el-menu-item index="/goodList">商品列表</el-menu-item>
					  <el-menu-item index="/money">购物车</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

			</el-menu>
		</el-aside>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-dropdown>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>查看</el-dropdown-item>
						<el-dropdown-item>新增</el-dropdown-item>
						<el-dropdown-item>删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>{{currentUserName}}</span>
			</el-header>

			<el-main>
				<el-button type="primary" @click="dialogFormVisible = true">新增商品</el-button>
				<!-- 当在这个输入框中输入信息之后 则将symbol设置为1 给系统说明此时将要进行“通过用户名查询用户信息” 这一功能 -->
				<el-input v-model="searchByName" @input="symbol=1" autocomplete="off" placeholder="输入查询的名称" style="width: 200px;margin-left: 50px;"></el-input>
				<el-input v-model="searchById" @input="symbol=2" autocomplete="off" placeholder="输入查询的ID号" style="width: 200px;margin-left: 30px;"></el-input>
				
				
				<el-button type="danger" @click="search()" style="margin-left: 30px;">搜索</el-button>
				<el-table :data="tableData">
					<el-table-column prop="id" label="ID" width="210">
					</el-table-column>
					<el-table-column prop="name" label="商品名称" width="180">
					</el-table-column>
					<el-table-column prop="price" label="单价" width="180">
						<template slot-scope="scope">
							<span style="font-size: 30px;color: #555;">{{scope.row.price}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="desc" label="商品描述" width="180">
					</el-table-column>
					<el-table-column prop="photo" label="商品图片" width="380" align="center">
						<template slot-scope="scope">
							<img :src="scope.row.photo" style="width: 100px;height: 100px;">
						</template>
					</el-table-column>

					<el-table-column>
						<template slot-scope="scope">
							<el-button type="success" @click="addCart(scope.row.id)" plain>添加购物车</el-button>
							<el-button type="warning" @click="update(scope.row.id)" plain>修改</el-button>
							<el-button type="danger" @click="deletec(scope.row.id)" plain>删除</el-button>
						</template>
					</el-table-column>

				</el-table>

			</el-main>
		</el-container>
		<el-dialog title="新增商品" :visible.sync="dialogFormVisible" style="width: 1000px;margin-left: 450px;">
			<el-form :model="form">
				<el-form-item label="商品名称" :label-width="formLabelWidth">
					<el-input v-model="name" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="商品图片" :label-width="formLabelWidth">
					<el-input v-model="photo" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="商品单价" :label-width="formLabelWidth">
					<el-input v-model="price" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				
				<el-form-item label="商品描述" :label-width="formLabelWidth">
					<el-input v-model="desc" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
		
		
		<el-dialog title="修改信息" :visible.sync="dialogFormVisible2" style="width: 1000px;margin-left: 450px;">
			<el-form :model="form2">
				<el-form-item label="商品名称" :label-width="formLabelWidth">
					<el-input v-model="name2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="商品图片" :label-width="formLabelWidth">
					<el-input v-model="photo2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="商品单价" :label-width="formLabelWidth">
					<el-input v-model="price2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				
				<el-form-item label="商品描述" :label-width="formLabelWidth">
					<el-input v-model="desc2" autocomplete="off" style="width: 200px;"></el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="alter()">确 定</el-button>
			</div>
		</el-dialog>
		
		
		
	</el-container>
</template>

<script>
	export default {
		data() {
			const item = {
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			};
			return {
				tableData: this.$store.state.goodList,
				formLabelWidth: '120px',
				dialogFormVisible: false,
				name: '',
				price: '',
				desc: "",
				photo: '',
				
				
				dialogFormVisible2: false,
				name2: '',
				price2: '',
				desc2: "",
				photo2: '',
				
				currentId:"", //用于保存当前ID号
				   
				symbol:0, //0为初始状态 1根据用户名来查询 2根据ID号来查询 3根据性别来查询 4根据角色身份来查询 5根据邮箱地址查询
				searchByName:"", //用于搜索的用户名
				searchById:"",//用于搜索的ID号
				currentUserName:this.$store.state.currentUsername,
			}
		},
		methods: {
			deletec(id) {
				this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						var url = "/api/deleteGood?id=" + id;
						this.axios
							.get(url)
							.then((response) => {
								this.getGoodList(); //拉取所有用户数据
								this.tableData = this.$store.state.goodList; //把用户数据显示到表上
								// location.reload();
							})
							.catch(function(error) {


								alert("删除失败");
							});

						this.$message({
							type: "success",
							message: "删除成功!",
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			add() {
				var url = "/api/addGood";
				var d = "?name=" + this.name + "&price=" + this.price + "&desc=" + this.desc + "&photo=" + this
					.photo;
				this.axios
					.get(url + d)
					.then((response) => {
						alert("新增成功");
						this.getGoodList(); //拉取所有用户数据
						this.tableData = this.$store.state.goodList; //把用户数据显示到表上
						this.dialogFormVisible=false; //关闭对话框
					})
					.catch(function(error) {
						alert("新增失败");
					});
			},
			update(id){
				//1.获取当前点击的这一行用户数据 并且显示在对话框中
				var url = "/api/findGoodById?id="+id;
				this.axios.get(url).then((response)=>{
					//绑定查询到的数据
					this.name2 = response.data[0].name;
					this.price2 = response.data[0].price;
					this.desc2 = response.data[0].desc;
					this.photo2 = response.data[0].photo;

					this.currentId = id;
					this.dialogFormVisible2 = true; //打开对话框
				})
				
			},
			//2.完成修改功能
			alter(){
				var url ="/api/updateGoodById?name="+this.name2+"&price="+this.price2+"&desc="+this.desc2+"&photo="+this.photo2+"&id="+ this.currentId;
				// var d = "?name="+this.name2+"&price="+this.price2+"&desc="+this.desc2+"&photo="+this.photo2+"&id="+ this.currentId;

				this.axios.get(url).then((response)=>{
					// element.eleme.cn
					this.$message({
						type: "success",
						message: "修改成功!",
					});
					this.getGoodList(); //拉取所有用户数据
					this.tableData = this.$store.state.goodList; //把用户数据显示到表上
					this.dialogFormVisible2=false; //关闭对话框
				})
			},
			search(){ //查询功能
				var url;
				switch(this.symbol){
					case 0:
						this.$message({
							type: "error",
							message: "请输入查询信息",
						});
						break;
					case 1:
						url="/api/findByName?name="+this.searchByUsername;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
					case 2:
						url="/api/findById?id="+this.searchById;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
					case 3:
						url="/api/findBySex?sex="+this.searchBySex;
						this.axios.get(url).then((response)=>{
							
								
								this.$store.state.user = []; //清空原本数据
								this.$store.commit("getUser", response); //把查出来的数据添加进去
								this.tableData = this.$store.state.user; //把用户数据显示到表上
								
							
						});
						break;
				}
			},
			addCart(id){
				var url = "/api/addCart?id="+id;
				this.axios.get(url).then((response)=>{
							
						this.$message({
							type: "success",
							message: "添加成功!",
						});
						this.getMoneyList(); //拉取所有用户数据
					}).catch(function(error) {
						this.$message({
							type: "error",
							message: "添加失败!",
						});
					})
			}
		}
	};
</script>

<style>
	/* 2. */
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
